import './ScrollView.scss'
import React from 'react'
import Loading from "component/Loading/Loading"
import { connect } from 'react-redux'
/**
 * create by cyw 2020/5/28
 * 滚动组件
 */

class ScrollView extends React.Component {
    constructor(props) {
        super(props)
        this._onLoadPage = this.onLoadPage.bind(this)
    }

    onLoadPage() {
        let clientHeight = document.documentElement.clientHeight;
        let scrollHeight = document.body.scrollHeight;
        let scrollTop = document.documentElement.scrollTop

        let proLoadDis = 30;

        if ((scrollTop + clientHeight) >= (scrollHeight - proLoadDis)) {
            if (!this.props.isend) {

                if (!this.props.readyToLoad) {
                    return
                }
                this.props.loadCallback && this.props.loadCallback()
            }
        }
    }

    componentWillMount() {
        window.addEventListener('scroll', this._onLoadPage)
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this._onLoadPage)
    }
    render() {
        return (
            <div className="scrollView" id="scrollView">
                {this.props.children}
                <Loading isend={this.props.isend}></Loading>
            </div>
        )
    }
}
export default connect(
    (state) => ({
        readyToLoad: state.scrollViewReducer.readyToLoad
    })
)(ScrollView)
